import React, { useState, useEffect } from 'react';
import EditContainer from '../EditContainer';
import FormSection from '../EditContainer/FormSection';
import './GenericEditPage.css';

const GenericEditPage = ({ 
  title = "信息编辑",
  icon = "default",
  fields = [],
  uploadAreas = [],
  initialData = null, // 编辑时的初始数据
  recordType = 'journal', // 记录类型，用于文件保存
  onBack = () => {},
  onSubmit = () => {},
  submitText = "确认保存",
  cancelText = "取消"
}) => {
  // 初始化表单数据
  const getInitialFormData = () => {
    const data = {};
    fields.forEach(field => {
      if (field.key) {
        // 如果有初始数据，使用初始数据，否则使用默认值
        if (initialData && initialData[field.key] !== undefined && initialData[field.key] !== null) {
          data[field.key] = initialData[field.key];
        } else if (field.type === 'array') {
          data[field.key] = field.defaultValue || [''];
        } else {
          data[field.key] = field.defaultValue || '';
        }
      }
    });
    return data;
  };

  const [formData, setFormData] = useState(getInitialFormData());
  const [uploadedFiles, setUploadedFiles] = useState({});
  const [initialUploadedFiles, setInitialUploadedFiles] = useState({}); // 保存初始文件列表，用于检测删除的文件

  // 根据 initialData 初始化上传文件列表（已有文件）
  const getInitialUploadFiles = () => {
    const files = {};
    if (!initialData || !initialData.id) {
      console.log('[GenericEditPage] 新建模式，没有已有文件');
      return files; // 新建模式，没有已有文件
    }

    console.log('[GenericEditPage] 初始化上传文件列表，initialData:', initialData);
    console.log('[GenericEditPage] uploadAreas 配置:', uploadAreas);

    // 遍历上传区域配置，为每个区域创建文件对象列表
    uploadAreas.forEach(area => {
      const areaKey = area.key || area.label;
      const fileNameField = areaKey; // 上传区域的 key 应该对应数据库中的 _url 字段

      console.log(`[GenericEditPage] 处理上传区域: ${areaKey}, 数据库字段: ${fileNameField}`);
      
      // 从 initialData 中获取文件名（可能逗号分隔的多个文件名）
      const fileNameStr = initialData[fileNameField] || '';
      console.log(`[GenericEditPage] 区域 ${areaKey} 的文件名字符串: "${fileNameStr}"`);
      
      if (fileNameStr && fileNameStr.trim() !== '') {
        // 解析文件名（支持逗号分隔）
        const fileNames = fileNameStr.split(',').map(name => name.trim()).filter(name => name);
        console.log(`[GenericEditPage] 区域 ${areaKey} 解析出的文件名:`, fileNames);
        
        // 为每个文件名创建文件对象（包含文件名、记录类型、记录ID）
        files[areaKey] = fileNames.map(fileName => ({
          name: fileName, // 显示名称
          fileName: fileName, // 实际文件名
          recordType: recordType,
          recordId: initialData.id
        }));
        console.log(`[GenericEditPage] 区域 ${areaKey} 创建的文件对象:`, files[areaKey]);
      } else {
        console.log(`[GenericEditPage] 区域 ${areaKey} 没有文件（字段值为空）`);
      }
    });

    console.log('[GenericEditPage] 最终初始文件列表:', files);
    return files;
  };

  // 当 initialData 改变时，更新表单数据和上传文件列表
  useEffect(() => {
    const newFormData = getInitialFormData();
    setFormData(newFormData);
    
    // 更新上传文件列表（已有文件）
    const initialFiles = getInitialUploadFiles();
    console.log('[GenericEditPage] useEffect: 初始文件列表:', initialFiles);
    setUploadedFiles(initialFiles);
    // 保存初始文件列表（深拷贝），用于后续比较检测删除的文件
    const initialFilesCopy = JSON.parse(JSON.stringify(initialFiles));
    console.log('[GenericEditPage] useEffect: 保存的初始文件列表副本:', initialFilesCopy);
    setInitialUploadedFiles(initialFilesCopy);
  }, [initialData, fields]); // 添加 fields 作为依赖，确保字段配置变化时也更新

  const handleFieldChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleArrayFieldAdd = (field) => {
    setFormData(prev => ({
      ...prev,
      [field]: [...prev[field], '']
    }));
  };

  const handleArrayFieldRemove = (field, index) => {
    setFormData(prev => ({
      ...prev,
      [field]: prev[field].filter((_, i) => i !== index)
    }));
  };

  const handleArrayFieldChange = (field, index, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: prev[field].map((item, i) => i === index ? value : item)
    }));
  };

  const handleUpload = (type, files) => {
    // 只保存上传的文件引用，不立即保存到磁盘
    // 文件将在点击"保存"按钮时统一处理
    setUploadedFiles(prev => ({
      ...prev,
      [type]: files
    }));
  };

  const handleSubmit = () => {
    console.log('[GenericEditPage] handleSubmit: 准备提交');
    console.log('[GenericEditPage] handleSubmit: initialUploadedFiles =', initialUploadedFiles);
    console.log('[GenericEditPage] handleSubmit: uploadedFiles =', uploadedFiles);
    console.log('[GenericEditPage] handleSubmit: initialData?.id =', initialData?.id);
    // 传递初始文件列表，用于检测删除的文件
    onSubmit(formData, uploadedFiles, initialData?.id, initialUploadedFiles);
  };

  const handleCancel = () => {
    onBack();
  };

  // 处理字段配置，添加事件处理函数
  const processedFields = fields.map((field, index) => {
    const { key, ...fieldProps } = field; // 分离 key，避免 React 警告
    const processedField = { ...fieldProps };
    
    if (field.type === 'array') {
      processedField.value = formData[field.key]?.[0] || '';
      processedField.arrayValue = formData[field.key] || []; // 传递完整数组用于判断
      processedField.onChange = (value) => handleArrayFieldChange(field.key, 0, value);
      processedField.onAdd = () => handleArrayFieldAdd(field.key);
    } else {
      processedField.value = formData[field.key] || '';
      processedField.onChange = (value) => handleFieldChange(field.key, value);
    }
    
    return processedField;
  });

  // 处理上传区域配置
  const processedUploadAreas = uploadAreas.map((area, index) => {
    const areaKey = area.key || area.label;
    const { key, ...areaProps } = area; // 分离 key，避免 React 警告
    return {
      ...areaProps,
      initialFiles: uploadedFiles[areaKey] || [], // 传递该区域的初始文件列表
      onUpload: (files) => handleUpload(areaKey, files)
    };
  });

  return (
    <div className="generic-edit-page">
      <EditContainer
        title={title}
        icon={icon}
        onCustomize={() => console.log('自定义列')}
      >
        <FormSection
          fields={processedFields}
          uploadAreas={processedUploadAreas}
          onSubmit={handleSubmit}
          onCancel={handleCancel}
          submitText={submitText}
          cancelText={cancelText}
        />
      </EditContainer>
    </div>
  );
};

export default GenericEditPage;
